<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<view class="row">
					<pure-code-input
						v-model="code1"
						@onConfirm="onConfirm1"
					></pure-code-input>
				</view>
			</pj-demo>

			<!-- 自定义大小 -->
			<pj-demo title="自定义大小">
				<view class="row">
					<pure-code-input
						v-model="code2"
						@onConfirm="onConfirm2"
						size="40px"
					></pure-code-input>
				</view>
			</pj-demo>

			<!-- 自定义光标颜色 -->
			<pj-demo title="自定义光标颜色">
				<view class="row">
					<pure-code-input
						v-model="code3"
						@onConfirm="onConfirm3"
						cursor-color="red"
					></pure-code-input>
				</view>
			</pj-demo>

			<!-- 验证码长度 -->
			<pj-demo title="验证码长度">
				<view class="row">
					<pure-code-input
						v-model="code4"
						@onConfirm="onConfirm4"
						cursor-color="red"
						:length="4"
					></pure-code-input>
				</view>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";

	// 验证码
	const code1 = ref("");
	const code2 = ref("");
	const code3 = ref("");
	const code4 = ref("");

	// 确认事件
	function onConfirm1(e) {
		uni.showToast({
			title: `输入的验证码: ${e.detail.value}`,
			icon: "none"
		});
	}

	// 确认事件
	function onConfirm2(e) {
		uni.showToast({
			title: `输入的验证码: ${e.detail.value}`,
			icon: "none"
		});
	}

	// 确认事件
	function onConfirm3(e) {
		uni.showToast({
			title: `输入的验证码: ${e.detail.value}`,
			icon: "none"
		});
	}

	// 确认事件
	function onConfirm4(e) {
		uni.showToast({
			title: `输入的验证码: ${e.detail.value}`,
			icon: "none"
		});
	}
</script>

<style lang="scss" scoped>
	.row {
		padding: 12px 16px;
		border-radius: var(--pure-radius-default);
		background: var(--pure-background-default);
	}
</style>
